<template>
  <div class="console">
    <a-row :gutter="[12, 12]" class="demo-row">
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
        <a-card class="card-1" :bordered="false">
          <a-skeleton-line v-if="loading" :rows="7" />
          <template v-else>
            <a-row justify="space-between" align="center">
              <a-col :xs="24" :sm="16" :md="16" :lg="16" :xl="17" :xxl="16">
                <a-typography>
                  <a-typography-title :heading="3">Arco Design Vue</a-typography-title>
                  <a-typography-paragraph>
                    <p class="mb-3">开箱即用的中台前端/设计解决方案</p>
                    <ul class="text-xs leading-6">
                      <li class="truncate"
                        ><a-badge
                          status="normal"
                          class="mr-2"
                        />内置常用模板，无需考虑交互排版，助你高效开发</li
                      >
                      <li class="truncate"
                        ><a-badge status="normal" class="mr-2" />样式美观大方，无缝对接 Arco
                        Design，随意组合页面，随心所欲</li
                      >
                      <li class="truncate"
                        ><a-badge
                          status="normal"
                          class="mr-2"
                        />丰富的布局模式，具有高可配性，满足您的各类布局需求</li
                      >
                      <li class="truncate"
                        ><a-badge
                          status="normal"
                          class="mr-2"
                        />优质的售后技术支持，完善的文档，让您事半功倍</li
                      >
                    </ul>
                  </a-typography-paragraph>
                </a-typography>
                <div>
                  <div class="flex items-center">
                    <div>评价：</div>
                    <div><a-rate :default-value="5" readonly /></div>
                  </div>
                </div>
              </a-col>
              <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="7" :xxl="8">
                <img src="~@/assets/images/sales-dashboard.svg" class="cover" />
              </a-col>
            </a-row>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
        <a-row :gutter="[12, 12]">
          <a-col :span="12">
            <a-card class="card-2" :bordered="false">
              <a-skeleton-line v-if="loading" :rows="3" />
              <template v-else>
                <div class="flex justify-between">
                  <div>
                    <div>
                      <a-typography-text type="secondary"> 访问量 </a-typography-text>
                    </div>
                    <div class="pt-1">
                      <CountTo
                        prefix="￥"
                        :startVal="1"
                        :endVal="info.visits.dayVisits"
                        class="text-3xl"
                      />
                    </div>
                  </div>
                  <div>
                    <icon-desktop class="iconSize danger-light-4" />
                  </div>
                </div>
                <div class="summary"
                  >增长幅度<a-tag color="green" size="small" class="ml-2">+7%</a-tag></div
                >
              </template>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card class="card-2" :bordered="false">
              <a-skeleton-line v-if="loading" :rows="3" />
              <template v-else>
                <div class="flex justify-between">
                  <div>
                    <div>
                      <a-typography-text type="secondary"> 销售额 </a-typography-text>
                    </div>
                    <div class="pt-1">
                      <CountTo
                        prefix="￥"
                        :startVal="1"
                        :endVal="info.saleroom.weekSaleroom"
                        class="text-3xl"
                      />
                    </div>
                  </div>
                  <div>
                    <icon-tag class="iconSize primary-light-4" />
                  </div>
                </div>
                <div class="summary"
                  >下降幅度<a-tag color="red" size="small" class="ml-2">-12%</a-tag></div
                >
              </template>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card class="card-2" :bordered="false">
              <a-skeleton-line v-if="loading" :rows="3" />
              <template v-else>
                <div class="flex justify-between">
                  <div>
                    <div>
                      <a-typography-text type="secondary"> 订单量 </a-typography-text>
                    </div>
                    <div class="pt-1">
                      <CountTo
                        prefix="￥"
                        :startVal="1"
                        :endVal="info.orderLarge.weekLarge"
                        class="text-3xl"
                      />
                    </div>
                  </div>
                  <div>
                    <icon-calendar class="iconSize success-light-4" />
                  </div>
                </div>
                <div class="summary"
                  >下降幅度<a-tag color="red" size="small" class="ml-2">+35%</a-tag></div
                >
              </template>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card class="card-2" :bordered="false">
              <a-skeleton-line v-if="loading" :rows="3" />
              <template v-else>
                <div class="flex justify-between">
                  <div>
                    <div>
                      <a-typography-text type="secondary"> 成交额 </a-typography-text>
                    </div>
                    <div class="pt-1">
                      <CountTo
                        prefix="￥"
                        :startVal="1"
                        :endVal="info.volume.weekLarge"
                        class="text-3xl"
                      />
                    </div>
                  </div>
                  <div>
                    <icon-trophy class="iconSize warning-light-4" />
                  </div>
                </div>
                <div class="summary"
                  >增长幅度<a-tag color="green" size="small" class="ml-2">-7%</a-tag></div
                >
              </template>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <a-row :gutter="[12, 12]" class="demo-row">
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18" :xxl="18">
        <a-card class="card-1" title="会员增长趋势" :bordered="false">
          <a-skeleton-line v-if="loading" :rows="7" />
          <template v-else>
            <NewVisitAmount />
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="6" :xxl="6">
        <a-card class="card-4" :bordered="false">
          <div class="logo pt-4">
            <a-skeleton-shape v-if="loading" class="mb-4" />
            <img v-else src="~@/assets/images/logo.png" alt="Admin Pro" />
          </div>
          <a-skeleton-line v-if="loading" :rows="6" />
          <template v-else>
            <h3>NaiveAdmin</h3>
            <p class="word mt-4">开箱即用的中台前端<br />设计解决方案</p>
            <div class="btn">
              <a-button
                type="primary"
                shape="round"
                size="large"
                target="_blank"
                href="https://www.naiveadmin.com"
                >去官网看看</a-button
              ></div
            >
            <div class="mt-6">
              <a-space wrap>
                <a-tag color="#7816ff">多生态支持</a-tag>
                <a-tag color="#00b42a">丰富功能</a-tag>
                <a-tag color="#ff7d00">实用组件</a-tag>
              </a-space>
            </div>
          </template>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="[12, 12]" class="demo-row">
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18" :xxl="18">
        <a-card class="card-1" :bordered="false">
          <a-skeleton-line v-if="loading" :rows="9" />
          <a-table
            v-else
            :data="tableData"
            :pagination="false"
            :bordered="false"
            size="medium"
            :scroll="{ x: 768, y: 0 }"
          >
            <template #columns>
              <a-table-column title="姓名" data-index="mame" align="left">
                <template #cell="{ record }">
                  <div class="flex items-center">
                    <a-avatar>
                      <img :alt="record.name" :src="record.avatar" />
                    </a-avatar>
                    <p class="ml-5">{{ record.name }}</p>
                  </div>
                </template>
              </a-table-column>
              <a-table-column title="是否会员" data-index="isMember" align="center">
                <template #cell="{ record }">
                  <a-tag :color="record.isMember ? 'red' : 'green'">{{
                    record.isMember ? '是' : '否'
                  }}</a-tag>
                </template>
              </a-table-column>
              <a-table-column title="手机" data-index="telephone" align="center" />
              <a-table-column title="购买日期" data-index="date" align="center" />
              <a-table-column title="操作" align="center">
                <template #cell="{ record }">
                  <a-link href="javascript:;">编辑</a-link>
                  <a-divider direction="vertical" />
                  <a-popconfirm :content="`您确认要 ${record.name} 删除吗？`">
                    <a-link href="javascript:;">删除</a-link>
                  </a-popconfirm>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="6" :xxl="6">
        <a-card class="card-6" :bordered="false" title="评论">
          <template #extra>
            <a-link>更多</a-link>
          </template>
          <a-skeleton-line v-if="loading" :rows="9" />
          <a-comment
            v-else
            :author="item.name"
            :content="item.content"
            :datetime="item.datetime"
            align="right"
            v-for="(item, index) of comment"
            :key="index"
          >
            <template #avatar>
              <a-avatar :size="30">
                <img :alt="item.name" :src="item.avatar" />
              </a-avatar>
            </template>
          </a-comment>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import NewVisitAmount from './components/NewVisitAmount.vue';
  import { getConsoleInfo } from '@/api/dashboard/console';
  import { CountTo } from '@/components/CountTo/index';
  import schoolboy from '@/assets/images/schoolboy.png';

  const loading = ref(true);
  const info = reactive<any>({
    saleroom: {},
    orderLarge: {},
    visits: {},
    volume: {},
  });

  onMounted(async () => {
    const res = await getConsoleInfo();
    info.saleroom = res.saleroom;
    info.orderLarge = res.orderLarge;
    info.visits = res.visits;
    info.volume = res.volume;
    loading.value = false;
  });

  const comment = [
    {
      id: 1,
      name: '武军',
      avatar: schoolboy,
      content: '这个系统太好用了',
      datetime: '5分钟前',
    },
    {
      id: 2,
      name: '顾平',
      avatar: schoolboy,
      content: 'UI界面有两下子',
      datetime: '1小时前',
    },
    {
      id: 3,
      name: '何军',
      avatar: schoolboy,
      content: '颜值有点高呀',
      datetime: '1天前',
    },
    {
      id: 4,
      name: '朱一龙',
      avatar: schoolboy,
      content: '给作者点赞',
      datetime: '2个月前',
    },
    {
      id: 5,
      name: '夏勇',
      avatar: schoolboy,
      content: '还是多提宝贵建议吧',
      datetime: '3年前',
    },
  ];

  const tableData = [
    {
      id: 1,
      name: '黎磊',
      avatar: schoolboy,
      isMember: true,
      telephone: '1281391234',
      date: '2021-12-14',
    },
    {
      id: 2,
      name: '周强',
      avatar: schoolboy,
      isMember: true,
      telephone: '1281391234',
      date: '2021-12-14',
    },
    {
      id: 3,
      name: '常静',
      avatar: schoolboy,
      isMember: true,
      telephone: '1281391234',
      date: '2021-12-14',
    },
    {
      id: 4,
      name: '尹丽',
      avatar: schoolboy,
      isMember: true,
      telephone: '1281391234',
      date: '2021-12-14',
    },
    {
      id: 5,
      name: '江秀英',
      avatar: schoolboy,
      isMember: false,
      telephone: '1281391234',
      date: '2021-12-14',
    },
    {
      id: 6,
      name: '杜杰',
      avatar: schoolboy,
      isMember: true,
      telephone: '1281391234',
      date: '2021-12-14',
    },
  ];
</script>

<style lang="less" scoped>
  .demo-row {
    margin-bottom: 6px !important;
  }
  .card-1 {
    h3.arco-typography {
      margin: 8px 0;
    }
    li {
      margin-left: 10px;
    }
  }

  .card-2 {
    :deep(.arco-statistic-title) {
      margin-bottom: 0;
    }
    .summary {
      margin-top: 8px;
      font-size: 12px;
    }
    .iconSize {
      font-size: 32px;
    }
  }
  .card-4 {
    height: 328px;
    text-align: center;
    h3 {
      margin: 10px 0;
      font-size: 28px;
    }
    .logo {
      width: 60px;
      margin: 0 auto;
    }
    .price {
      margin: 15px 0;
    }
    .word {
      margin-bottom: 15px;
    }
  }

  .card-6 {
    height: 398px;
  }
  :deep(.arco-card .arco-card-body .prefix) {
    font-size: 22px;
    margin-right: 3px;
  }
</style>
